/**
 * 动态标绘API plot4ol3，基于OpenLayer3开发，旨在为基于开源GIS技术做项目开发提供标绘API。
 * 当前版本1.0，提供的功能：绘制基本标绘符号。
 * 绘制接口：PlotDraw
 * 具体用法请参考演示系统源码。
 *
 * 开发者：@平凡的世界
 * QQ号：21587252
 * 邮箱：gispace@yeah.net
 * 博客：http://blog.csdn.net/gispace
 * 动态标绘交流QQ群：318659439
 *
 * 如果想要收到API更新邮件，请在博客评论或者资源下载页面留下您的邮箱地址。
 *
 * */

var map, plotDraw, drawOverlay, drawStyle, featureSource;

function init() {

    var view = new ol.View({
        maxZoom: 18,
        minZoom: 1,
        center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
        zoom: 4
    });


    // 设置标绘符号显示的默认样式
    var stroke = new ol.style.Stroke({color: '#FF0000', width: 2});
    var fill = new ol.style.Fill({color: 'rgba(0,255,0,0.4)'});
    drawStyle = new ol.style.Style({fill: fill, stroke: stroke});

    // 绘制好的标绘符号，添加到FeatureOverlay显示。
    featureSource = new ol.source.Vector();
    drawOverlay = new ol.layer.Vector({
        title: '标绘',
        visible: true,
        source: featureSource
    });
    drawOverlay.setStyle(drawStyle);

    // 初始化地图，底图使用openstreetmap在线地图
    map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Group({
                'title': '基础底图',
                layers: [
                    new ol.layer.Tile({
                        title: '高德地图',
                        type: 'base',
                        visible: true,
                        source: new ol.source.XYZ({
                            urls: ['http://emap1.mapabc.com/mapabc/maptile?x={x}&y={y}&z={z}',
                                'http://emap2.mapabc.com/mapabc/maptile?x={x}&y={y}&z={z}',
                                'http://emap3.mapabc.com/mapabc/maptile?x={x}&y={y}&z={z}']
                        })
                    }),
                    new ol.layer.Tile({
                        title: 'OSM',
                        type: 'base',
                        visible: false,
                        source: new ol.source.OSM()
                    })

                ]
            }),
            new ol.layer.Group({
                title: '叠加图层',
                layers: [
                    drawOverlay
                ]
            })
        ],
        view: view
    });

    // 初始化标绘绘制工具，添加绘制结束事件响应
    plotDraw = new P.PlotDraw(map);
    plotDraw.on(P.Event.PlotDrawEvent.DRAW_END, onDrawEnd, false, this);

    var center = function (obj) {
        var pan = ol.animation.pan({
            duration: 1000,
            easing: elastic,
            source: view.getCenter()
        });
        map.beforeRender(pan);
        view.setCenter(obj.coordinate);
    };
    var showCoordinates = function (evt) {
        var coordinate = evt.coordinate;
        alert(ol.proj.transform(
                coordinate, 'EPSG:3857', 'EPSG:4326'));
    };
    var elastic = function (t) {
        return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
    };

    var contextmenu = new ContextMenu({
        width: 170,
        default_items: true, //default_items are (for now) Zoom In/Zoom Out
        items: [{
                text: '显示坐标',
                callback: showCoordinates
            }, {
                text: '地图居中',
                callback: center
            }, '-', ]
    });
    map.addControl(contextmenu);

    //添加图层管理功能
    var layerSwitcher = new ol.control.LayerSwitcher({
        tipLabel: '图层管理' // Optional label for button
    });

    map.addControl(layerSwitcher);

}

// 绘制结束后，添加到FeatureOverlay显示。
function onDrawEnd(event) {
    var feature = event.feature;
    featureSource.addFeature(feature);
}

// 指定标绘类型，开始绘制。
function activate(type) {
    plotDraw.activate(type);
}
;

function showAbout() {
    document.getElementById("aboutContainer").style.visibility = "visible";
}

function hideAbout() {
    document.getElementById("aboutContainer").style.visibility = "hidden";
}